<!DOCTYPE html>
<html lang="en">
<head>
	<title>Calendar - Customized Days</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />

	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />

	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css"/>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(function () {
			$("#calendar1").wijcalendar({
				displayDate: new Date('2010/12/1'),
				customizeDate: function ($daycell, date, dayType, hover, preview) {
					var $img;
					if (date.getMonth() === 11 && date.getDate() === 24) {
						$img = $('<div></div>').width(16).height(16).css('background-image', 'url(http://cdn.wijmo.com/images/xmas.png)');

						$daycell.attr('align', 'right').empty().append($img);

						if ($daycell.hasClass('ui-datepicker-current-day')) {
							$daycell.css('background-color', '#aaa');
						} else {
							$daycell.css('background-color', hover ? 'lightgray' : '');
						}
						return true;
					}

					return false;
				}
			});
		});
	</script>
</head>

<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>Overview</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
				<div id="calendar1"></div>
			<!-- End demo markup -->
			<div class="demo-options">
			<!-- Begin options markup -->

			<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p></p>
		</div>
	</div>
</body>

</html>
